<template>
    <div id="dv-full-screen-container-v3" ref="domref">
        <template v-if="ready">
            <slot></slot>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import { debounce, observerDomResize } from './index'

const ready = ref(false)
const allWidth = ref(0)
const scale = ref(0)
const datavRoot = ref('')
const dom: any = ref()
const domref = ref()
const width = ref(0)
const height = ref(0)
const debounceInitWHFun: any = ref('')
const domObserver: any = ref('')
const afterAutoResizeMixinInit = () => {
    initConfig()
    setAppScale()
    ready.value = true
}
const initConfig = () => {
    const { width, height } = screen

    allWidth.value = width

    dom.value.style.width = `${width}px`
    dom.value.style.height = `${height}px`
}

const setAppScale = () => {
    const currentWidth = document.body.clientWidth
    dom.value.style.transform = `scale(${currentWidth / allWidth.value})`
}

const onResize = () => {
    setAppScale()
}






const autoResizeMixinInit = async () => {
    await initWH()
    getDebounceInitWHFun()
    bindDomResizeCallback()
    if (typeof afterAutoResizeMixinInit === 'function') {
        afterAutoResizeMixinInit()
    }
}

const initWH = (resize: any = true) => {
    return new Promise<void>(resolve => {
        nextTick(() => {

            const ddom = dom.value = domref.value

            width.value = ddom.clientWidth
            height.value = ddom.clientHeight

            if (typeof onResize === 'function' && resize) onResize()
            resolve()
        })
    })
}

const getDebounceInitWHFun = () => {

    debounceInitWHFun.value = debounce(100, initWH)

}
const bindDomResizeCallback = () => {

    domObserver.value = observerDomResize(dom.value, debounceInitWHFun.value)

    window.addEventListener('resize', debounceInitWHFun)
}
onMounted(() => {
    autoResizeMixinInit()
})
</script>

<style scoped lang="scss">
#dv-full-screen-container-v3 {
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
    transform-origin: left top;
    z-index: 999;
}
</style>